
import { memo, useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';
import classNames from 'classnames';

export interface Props {
  className?: string;
  title?: string;
  value: number
}

function AngleChart<Props>(props: Props) {
  const { value } = props;
  const domRef = useRef(null);

  const [chart, setChart] = useState()

  const updateValue = (value) => {
    if (!chart) {
      return;
    }

    chart.setOption({
      series: [
        {

          data: [
            {
              value: value,
            },
          ],
        },
      ],
    });
  };
  useEffect(() => {
      updateValue(value);
  }, [value]);


  const initChart = () => {
    const instance = echarts.init(domRef.current, 'purple');


    const pieNum = (value * 100) / 360
    const colorSet = {
      color: 'rgba(59,191,253,1)',
    }

    instance.setOption({
      series: [
        {
          name: '内部进度条',
          type: 'gauge',
          radius: '80%',
          startAngle: 90, // 仪表盘起始角度
          endAngle: 450, // 仪表盘结束角度（0度代表正上方）
          min: 0,
          max: 360,
          // detail: {show: false},
          splitNumber: 4,
          splitLine: {
            show: true,
            distance: 0,
            length: 8,
            lineStyle: {
              color: 'rgba(59,191,253,1)', //用颜色渐变函数不起作用
              width: 2,
            },
          },
          axisLine: {
            lineStyle: {
              color: [
                [10 / 360, colorSet.color],
                [1, colorSet.color],
              ],
              width: 2,
            },
          }, //仪表盘轴线
          axisLabel: {
            show: false,
            color: '#ffffff',
            fontSize: 14,
            fontWeight: 'bold',
            distance: -45,
          }, //刻度标签。

          axisTick: {
            show: false,
          },
          itemStyle: {
            color: '#ffffff',
          },
          detail: {
            show: false,
            formatter: function (value) {
              if (value !== 0) {
                var num = Math.round(value)
                return parseInt(num).toFixed(0) + '°'
              } else {
                return 0
              }
            },
            offsetCenter: ['0', '90%'],

            fontSize: 16,
            fontWeight: '700',
            color: '#ffffff',
          },
          title: {
            show: true,
            offsetCenter: [0, '100%'],
            color: '#fff',
            fontSize: 12, //表盘上的标题文字大小
            fontWeight: 400,
          },
          data: [
            {
              value: 60,
            },
          ],
          pointer: {
            show: true,
            length: '80%',
            width: "80%",
            icon: 'path://M700.065799 373.027761q116.507301 104.243374 209.508743 189.068865 39.857761 35.769785 77.671534 71.028574t67.451595 63.36362 47.522715 47.011718 17.884893 21.972868l0 61.319632q0 4.087975-17.884893-1.532991t-47.522715-17.373896-67.451595-27.593834-77.671534-33.214801q-93.001442-40.879755-209.508743-95.04543l0 193.156841q26.571841 19.417883 50.077699 37.813773 20.439877 15.329908 40.879755 30.148819t31.68181 22.994862q13.28592 9.197945 15.329908 18.906887t2.043988 22.994862l0 34.747791q0 8.175951-16.862899 10.730936t-40.368758-8.686948q-11.241933-6.131963-40.879755-18.39589t-63.36362-26.571841-64.896611-26.571841-46.500721-18.39589q-2.043988 0-3.576979-0.510997t-3.576979-0.510997-3.576979 0.510997-3.576979 0.510997q-15.329908 6.131963-46.500721 18.39589t-64.896611 26.571841-63.36362 26.571841-40.879755 18.39589q-23.505859 11.241933-40.368758 8.686948t-16.862899-10.730936l0-34.747791q0-13.28592 2.043988-22.994862t15.329908-18.906887q11.241933-8.175951 31.68181-22.994862t40.879755-30.148819q23.505859-18.39589 50.077699-37.813773l0-193.156841q-117.529295 54.165675-210.530737 95.04543-39.857761 17.373896-77.160537 33.214801t-66.940598 27.593834-47.522715 17.373896-17.884893 1.532991l0-61.319632q0-3.065982 17.884893-21.972868t47.522715-47.011718 66.940598-63.36362 77.160537-71.028574q93.001442-84.825491 210.530737-189.068865l0-231.992608q0-34.747791 10.219939-58.764647t25.549847-39.346764 33.214801-23.505859 33.725798-12.263926 26.060844-4.598972 11.241933-0.510997l10.219939 0q11.241933 1.021994 27.082837 5.109969t33.725798 12.263926 33.214801 23.505859 25.549847 39.346764 10.219939 58.764647l0 231.992608z',
            offsetCenter: [0, "40%"] // 修改偏移中心点为[0, 0]
          },

          animationDuration: 1000,
          z: 8,
        },





      ],
    });
    window.addEventListener('resize', function () {
      instance.resize();
    });


    setChart(instance)
  }
  useEffect(() => {
    initChart();
  }, [])

  return (
    <div ref={domRef} className={classNames('size-full', props.className)}></div>
  );
}

export default memo(AngleChart)